<template>

  <div class="sidemenu">
    <div class="btn" @click="checkCollapse">
      <span v-if="isCollapse"><el-icon>
          <DArrowRight />
        </el-icon></span>
      <span v-else-if="!isCollapse"><el-icon>
          <DArrowLeft />
        </el-icon></span>
    </div>
    <div class="search">
      <el-input
      class="w-100 m-2"
      size="small"
      placeholder="查找..."
      :suffix-icon="Search"
    />
    </div>
    <el-menu class="el-menu-vertical-demo" 
      :collapse="isCollapse" @open="handleOpen"
      popper-effect="dark"
      @close="handleClose">
      <el-menu-item index="1">
        <el-icon><Baseball /></el-icon>
        <template #title>影视</template>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><Baseball /></el-icon>
        <template #title>影视</template>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><Coin /></el-icon>
        <template #title>货币</template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><Help /></el-icon>
        <template #title>帮助</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { Search } from '@element-plus/icons-vue'
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const checkCollapse = () => {
  isCollapse.value = !isCollapse.value
}

</script>
<style lang="scss" scoped>
.sidemenu {
  // border: 1px solid yellow;
  // display: flex;
  // flex: 0.3;
  // height: 100%;
  // min-height: 400px;
  width: 110px;

  .search{
    margin: 5px 5px;
  }

  .btn {
    display: flex;
    justify-content: flex-end;
    width: 20px;
    height: 20px;
    // border: 1px solid red;
    align-items: center;
    background-color: #ccc;

  }

}</style>